<template>
	<view class="container">
		<view class="money_card">
			<view class="card_top">
				<view class="money_title">Valor disponivel</view>
				<image class="eye" v-if="isEye" @click="isEye=!isEye" src="@/static/images/user/eye.png" mode=""></image>
				<image class="eye" v-else @click="isEye=!isEye" src="@/static/images/user/eye_off.png" mode=""></image>
			</view>
			<view class="money_num" v-if="isEye">R$ 0,00</view>
			<view class="money_num" v-else >**********</view>
		</view>
		<view class="list">
			<view class="money_menu">
				<view class="m_left">
					<image class="m_icon" src="@/static/images/user/money_icon1.png" mode=""></image>
					<view class="m_text">
						<view class="m_name">Saldo Total</view>
						<view class="m_num" v-if="isEye">R$ 0,00</view>
						<view class="m_num" v-else>**********</view>
					</view>
				</view>
				<view class="icons">
					<up-icon name="arrow-right" color="#b3b3b3" size="24"></up-icon>
				</view>
			</view>
			<view class="money_menu">
				<view class="m_left">
					<image class="m_icon" src="@/static/images/user/money_icon2.png" mode=""></image>
					<view class="m_text">
						<view class="m_name">Saldo Total</view>
						<view class="m_num" v-if="isEye">R$ 0,00</view>
						<view class="m_num" v-else>**********</view>
					</view>
				</view>
				<view class="icons">
					<up-icon name="arrow-right" color="#b3b3b3" size="24"></up-icon>
				</view>
			</view>
		</view>

		<view class="search">
			<up-search
				shape="square"
				bgColor="#19191F"
				borderColor="rgba(69, 71, 87, 0.2)"
				height="74rpx"
				:searchIconSize="28"
				placeholder="Buscar"
				:showAction="false"
			></up-search>
		</view>
		<view class="menus">
			<view class="menu_l">
				<view class="menus_i" @click="clickMenu(index)" :class="{ menu_i_c: index == cur_index }" v-for="(item, index) in menu" :key="index">
					{{ item }}
				</view>
			</view>
		</view>

		<view class="main" v-if="cur_index!=1">
			<view class="m_item" v-for="(item, index) in 5" :key="index">
				<view class="i_left">
					<image class="zhu" src="@/static/images/user/mone_zhu.png" mode=""></image>
					<view class="i_name">Deposito</view>
				</view>
				<view class="m_right">
					<view class="i_btn">
						<up-button type="primary" color="rgba(255, 193, 32, 0.2)" :customStyle="btnStyle" text="Pendente"></up-button>
					</view>
					<view class="i_num">R$ 10,00</view>
				</view>
			</view>
		</view>
		<view class="default" v-else>Não encontramos nenhuma transação</view>
	</view>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';

const menu = ref(['Transacoes', 'Cassino', 'Bonus']);
const cur_index = ref(1);
const isEye=ref(true)

const btnStyle = {
	height: '48rpx',
	borderRadius: '30rpx',
	fontSize: '32rpx',
	color: '#FFC120',
	fontWeight: 700,
	background: 'rgba(255, 193, 32, 0.2)'
};

onMounted(() => {});

const clickMenu = (index) => {
	cur_index.value = index;
};
</script>

<style lang="scss" scoped>
.container {
	background-color: #19191f;
	width: 100vw;
	padding: 0 32rpx 44rpx;
	font-size: 32rpx;
	line-height: 44rpx;
	box-sizing: border-box;
	.money_card {
		margin-top: 40rpx;
		border-radius: 12rpx;
		background-color: #2fd080;
		padding: 32rpx;
		box-sizing: border-box;
		.card_top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			.eye {
				width: 48rpx;
				height: 48rpx;
				display: block;
			}
		}
		.money_num {
			margin-top: 32rpx;
			font-size: 64rpx;
			font-weight: 700;
			line-height: 64rpx;
		}
	}
	.list {
		margin-top: 46rpx;
		.money_menu {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-right: 40rpx;
			box-sizing: border-box;
			margin-bottom: 32rpx;
			&:last-child {
				margin-bottom: 0;
			}
			.m_left {
				display: flex;
				align-items: center;
				.m_icon {
					height: 48rpx;
					width: 48rpx;
					display: block;
					margin-right: 18rpx;
				}
				.m_text {
					.m_name {
						color: #7e84a0;
						font-weight: 700;
					}
					.m_num {
						margin-top: 12rpx;
						font-weight: 700;
					}
				}
			}
		}
	}
	.search {
		margin-top: 40rpx;
	}
	.menus {
		margin-top: 40rpx;
		display: flex;
		justify-content: center;
		font-size: 28rpx;
		line-height: 40rpx;
		height: 72rpx;
		.menu_l {
			border-radius: 36rpx;
			background-color: #25242e;
			display: flex;
			align-items: center;
			overflow: hidden;
			.menus_i {
				height: 72rpx;
				padding: 0 40rpx;
				display: flex;
				align-items: center;
				color: #7e84a0;
				transition: all 0.3s;
				font-weight: 700;
				&:nth-child(2) {
					border-left: 1rpx solid #454757;
					border-right: 1rpx solid #454757;
				}
			}
			.menu_i_c {
				background-color: #39374d;
				color: #7e84a0;
			}
		}
	}
	.main {
		margin-top: 28rpx;
		border: 1rpx solid rgba(69, 71, 87, 0.2);
		border-radius: 24rpx;
		overflow: hidden;
		.m_item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 148rpx;
			padding: 0 40rpx;
			box-sizing: border-box;
			border-bottom: 1rpx solid rgba(69, 71, 87, 0.2);
			&:last-child {
				border-bottom: 0;
			}
			.i_left {
				display: flex;
				align-items: center;
				.zhu {
					height: 80rpx;
					width: 80rpx;
					display: block;
					border-radius: 40rpx;
					margin-right: 10rpx;
				}
				.i_name {
					font-size: 28rpx;
					line-height: 40rpx;
					font-weight: 700;
				}
			}
			.m_right {
				font-size: 28rpx;
				line-height: 40rpx;
				font-weight: 700;
				.i_num {
					margin-top: 10rpx;
				}
			}
		}
	}
	.default {
		font-size: 28rpx;
		line-height: 40rpx;
		font-weight: 700;
		padding: 0 52rpx;
		color: #7E84A0;
		margin-top: 28rpx;
		border: 1rpx solid rgba(69, 71, 87, 0.2);
		border-radius: 24rpx;
		overflow: hidden;
		height: 158rpx;
		display: flex;
		align-items: center;
	}
}
</style>
